<template>
	<view class="order">
		<nt-card 
			:label="orderInfo.mtype" 
			:desc="orderInfo.item_date"
		>
			<template #button>
				<div class="copy" @tap="copyOrderInfo">复制</div>
			</template>
			<view 
				class="order-title h_title" 
				@tap="makePhoneCall(orderInfo.customerphone)"
			>
				姓名：{{ orderInfo.customername }} {{orderInfo.customerphone}}
				<text class="h_text" v-if="orderInfo.urgent"></text>
				<u-tag :text="orderInfo.urgent_text" plain size="mini" type="error"></u-tag>
				<text class="h_text"></text>
				<u-tag :text="orderInfo.utype" plain size="mini"></u-tag>
				<text class="h_text"></text>
				<u-tag :text="orderInfo.ctype" type="warning" plain size="mini"> </u-tag>
			</view>
			<view class="order-title"
				@tap="openMap({
					lat: orderInfo.navigation_lat,
					lng: orderInfo.navigation_lng,
					title: orderInfo.address
				})"
				@longpress="copyText(orderInfo.address)"
			>地址：{{orderInfo.address}}</view>
			<view class="order-content">
				
				<view class="order-content__item">
					<view class="order-content__item--label">订单状态：</view>
					<view class="order-content__item--right">{{ orderInfo.status_text || "--" }}</view>
				</view>
				<view class="order-content__item">
					<view class="order-content__item--label">备注信息：</view>
					<view class="order-content__item--right">{{ orderInfo.remarks || "--" }}</view>
				</view>
				<view class="order-content__item">
					<view class="order-content__item--label">预约时间：</view>
					<view class="order-content__item--right">{{ orderInfo.appointment || "--" }}</view>
				</view>
				<view class="order-content__item">
					<view class="order-content__item--label">订单编号：</view>
					<view class="order-content__item--right">{{ orderInfo.ordernumber || "--" }}</view>
				</view>
				<view class="order-content__item" v-if="orderInfo.appointmenttime">
					<view class="order-content__item--label">预约内容：</view>
					<view class="order-content__item--right">{{ orderInfo.appointmenttime || "--" }}</view>
				</view>
				<!-- <view class="order-content__item">
					<view class="order-content__item--label">送机时间：</view>
					<view class="order-content__item--right">买买买密密麻麻备注信息</view>
				</view>
				<view class="order-content__item">
					<view class="order-content__item--label">送机师傅：</view>
					<view class="order-content__item--right">
						<text>嘻嘻嘻</text>
						<text>归属师傅：嘻嘻嘻</text>
					</view>
				</view> -->
				
			</view>
		</nt-card>
	</view>
</template>

<script>
export default {
	props: {
		orderInfo: {
			type: Object,
			default: () => {}
		}
	},
	data(){
		return {
			
		}
	},
	methods: {
		copyOrderInfo(){
			// 投影仪[维修单]
			// 空姓名15688160572普老客户南天大众
			// 浦东新区川沙绿地东海岸5558弄1号楼301室
			// 备注信息：大眼橙投影仪开机黄色的光15688160572浦东新区川沙绿地东海岸5558弄1号楼301室大众900优惠后共计800块钱今天去带回来，张金亮帮忙联系的。录
			// 完成时间：2023-07-0915:35:47
			// 后台确认收款时间：2023-07-0817:15:19
			// 城市审阅时间：2023-07-0918:17:57
			const {
				mtype,
				customername,
				customerphone,
				urgent_text,
				utype,
				ctype,
				address,
				remarks,
				completion_date,
				city_review_date
			} = this.orderInfo
			let htmlText = `
${mtype} 
${customername}${customerphone}${urgent_text}${ctype}${utype}
地址：${address} `
			this.copyText(htmlText)
		}
	}
}
</script>

<style scoped lang="scss">
.order{
	.copy{
		background: var(--theme-color);
		color:#fff;
		font-size: 24rpx;
		display: inline-block;
		padding: 0 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 4rpx;
		margin-left: 20rpx;
	}
	/deep/ .nt-card{
		border-radius: 20rpx;
	}
	&-title{
		font-weight: bold;
		color:#333;
		font-size: 30rpx;
		margin: 20rpx 0;
	}
	.h_title{
		display: flex;
		align-items: center;
		.h_text{margin-left: 5px;}
	}
	&-content{
		background: #F5F5F5;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		&__item{
			display:flex;
			align-items: flex-start;
			justify-content: space-between;
			color:#666;
			font-size: 24rpx;
			line-height: 2;
			&--label{
				width: 140rpx;
			}
			&--right{
				display:flex;
				flex: 1;
				justify-content: space-between;
			}
		}
	}
}
</style>